<template>
    <div class='header'>
        <div class='headerleft'>
          <div class='iconfont backicon'>&#xe6a4;</div>
        </div> 
        <div class='headerinput'>
          <span class='iconfont'>&#xe6a2;</span>
          输入城市/景点/游玩/主题</div> 
        <router-link to='/city'>
          <div class='headerright'>
            {{this.city}}
            <span class='iconfont arrowicon'>&#xe6aa;</span>
          </div> 
        </router-link>
    </div>
  </template>
  
  <script>
  import {mapState} from 'vuex' 
  export default {
    name: 'homeheader',
   /* props:{
      city:String
    }*/
    computed:{
      ...mapState(['city']) 
      //mapState把vuex中的数据映射到该组件的computed里面，把vuex里的city公用数据映射到名字叫computed计算属性中
      //this.$store.state.city可以直接被替换成this.city
    }
  }
  </script>
 
  <style lang='stylus' scoped>
    @import '~styles/varibles.styl'
    .header
      display:flex
      line-height:$headerheight
      background:$bgcolor
      color:#fff
      .headerleft
        width:.64rem
        float:left
        .backicon
          text-align:center
          font-size:.5rem
      .headerinput
        flex:1   //缩写flex:1, 则其计算值为：1 1 0,即伸长flex-grow,收缩flex-shrink,默认基准值flex-basis
        height:.64rem
        line-height:.64rem
        margin-top:.12rem
        margin-left:.2rem
        padding-left:.1rem
        background:#fff
        border-radius:.1rem
        color:#ccd
      .headerright
        min-width:1.04rem//该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。
        padding:0 .1rem
        float:right
        text-align:center
        color:#fff
        .arrowicon
          margin-left:.04rem
          font-size:.3rem
  </style>
  